<!DOCTYPE html>
<html>
<head>
  <title>File API Example</title>
  <script src="EventUtil.js"></script>
</head>
<body>
  <p>This page is a demonstration of the File API with Drag and Drop. This works in the latest versions of all major browsers, but you may need to place this file on a web server to get it to work.</p>
  <div id="droptarget" style="width: 500px; height: 200px; background: silver">
    Drop some files here
  </div>
  <script>
    window.onload = function(){
      var droptarget = document.getElementById("droptarget");
      function handleEvent(event){
        var info = "",
          output = document.getElementById("output"),
          files, i, len;
        EventUtil.preventDefault(event);
        if (event.type == "drop"){
          files = event.dataTransfer.files;
          i = 0;
          len = files.length;
          while (i < len){
            info += files[i].name + " (" + files[i].type + ", " + files[i].size + " bytes)<br>";
            i++;
          }
          output.innerHTML = info;
        }
      }
      EventUtil.addHandler(droptarget, "dragenter", handleEvent);
      EventUtil.addHandler(droptarget, "dragover", handleEvent);
      EventUtil.addHandler(droptarget, "drop", handleEvent);
    };
  </script>
  <pre id="output"></pre>
</body>
</html>
